<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过滤器</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript" src="../js/dayjs.min.js"></script>
  <script src="../js/moment.min.js"></script>
</head>

<body>
  <!-- 
    过滤器：
      定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
      语法：
        1.注册过滤器：Vue.filter(name, callback) 或new Vue{filters: {}}
        2.使用过滤器：{{ xxx | 过滤器名 }} 或 v-bind:属性 = "xxx | 过滤器名"
      备注：
        1.过滤器也可以接受额外参数，多个过滤器也可以串联
        2.并没有改变原本的数据，是产生新的对应的数据
  -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h2>显示格式化后的时间</h2>
    <!-- 计算属性实现 -->
    <h3>现在是：{{fmtTime}}</h3>
    <!-- methods实现 -->
    <h3>现在是：{{getFmtTime()}}</h3>
    <!-- 过滤器实现 -->
    <h3>现在是：{{time | timeFormat}}</h3>
    <!-- 过滤器传参 -->
    <h3>现在是：{{time | timeFormat('YYYY_MM_DD') | mySlice}}</h3>
    <h3 :x="name | mySlice">{{name}}</h3>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;   // 阻止vue 在启动时生成生产提示
  // 全局过滤器 全局时 没有's'  filter
  Vue.filter('mySlice', function(val) {
    return val.slice(0, 4)
  })

  new Vue({
    el: "#root",
    data: {
      // time: "1629937187553"
      time: 1629938545000,     // 必须是数值型  不是字符型
      // time: "2021-08-08"
      name: "你好，尚硅谷"
    },
    computed: {
      fmtTime() {
        return dayjs(this.time).format('{YYYY} MM-DD HH:mm:ss');
        // return moment(this.time).format('{YYYY} MM-DD HH:mm:ss');
      }
    },
    methods: {
      getFmtTime() {
        return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
        // return moment(this.time).format('{YYYY} MM-DD HH:mm:ss');
      }
    },
    // 局部过滤器
    filters: {
      timeFormat(val, str='{YYYY} MM-DD HH:mm:ss') {
        return dayjs(val).format(str);
      },
      // mySlice(val) {
      //   return val.slice(0, 4)
      // }
    }
  })
</script>

</html>